<template>
	<view class="container">
		<u-toast ref="uToast" />
		<u-steps :list="numList" mode="number" :current="status"></u-steps>
		<view class="statustip">
			<span v-if="status ==='0'">{{status ==='0'?'您前面还有'+curorder+'单待制作':''}}</span>
		</view>
		<view class="dishlist" v-for="dish in dishlist" :key="dish._id">
			<view class="left">
				<view><span style="font-size: 15px;color: #222727;">{{dish.name}}</span></view>
				<view><span>{{dish.type}}</span></view>
			</view>
			<view class="center">X{{dish.count}}</view>
			<view class="right">{{dish.status=='0'&&status==0?'待接单':dish.status=='0'&&status==1?'待制作':dish.status=='1'?'制作完成':'已送达'}}</view>
		</view>
		<u-divider color="#9ea4aa;" half-width="200" border-color="#9ea4aa">没有更多了</u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dishlist:[],
				id:'',
				curorder:0,
				status:0,
				numList: [{
					name: '已下单'
				}, {
					name: '已接单'
				}, {
					name: '送餐中'
				}, {
					name: '待评价'
				}, 
				{
					name: '已完成'
				}],
			}
		},
		onLoad(val) {
			this.id=val.id
			this.getorderdetail()
			console.log(this.status);
		},
		methods: {
			onPullDownRefresh() {
				this.getorderdetail()
				let that = this
				setTimeout(() => {
					uni.stopPullDownRefresh();
					that.$refs.uToast.show({
						title: '刷新成功',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'success',
						duration: 1000,
						position: "top"
						// 如果不需要图标，请设置为false
						// icon: false
					})
				}, 200);
			},
			getorderdetail(){
				this.$u.post('/order/getOrderById',{id:this.id}).then(res=>{
					console.log(res,'获取的餐宿');
					this.dishlist=res.data.data.dishlist
					this.status = res.data.data.status
					if(this.status==='0'){
						this.getposition()
					}
				})
			},
			getposition(){
				this.$u.post('/order/gettOrderSort',{id:this.id}).then(res=>{
					console.log(res,'获取的餐宿2');
					this.curorder=res.data.curorder
					
				})
			}
		}
	}
</script>

<style lang="scss">
.container{
	padding: 30rpx 10rpx;
}
.statustip{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20rpx;
	color: #9ea4aa;
}
.dishlist{
	display: flex;
	padding: 30rpx  20rpx 5rpx 20rpx ;
	margin-bottom: 10rpx;
	justify-content: space-between;
	align-items: center;
	border-bottom:2px dashed #a7a7a7 ;
	.left view:last-child span{
		font-size: 13px;
		 color: #9ea4aa;
	}
}
</style>
